<style scoped>
    .wraper {
        padding: 0;
        margin-top: -20px;
    }

    .search {
        padding-bottom: 20px;
    }

    .search span {
        color: #68777c;
        font-weight: bold;
        padding-right: 18px;
    }

    .search button {
        background-color: #00a8f7;
        color: #fff;
        margin-left: 8px;
    }

    .top {
        margin-bottom: 20px;
        border-top: 1px dashed #cccccc;
    }

    .detail {
        border-top: 1px dashed #cccccc;
    }

    .wraper .headline {
        position: relative;
        font-size: 12px;
        color: #303134;
        font-weight: bold;
        margin: 10px 0;
        line-height: 32px;
        height: 32px;
    }

    .wraper .add-agent {
        position: absolute;
        top: 0px;
        right: 30px;
        background-color: #348bf2;
        color: #fff;
    }

    .iconfont {
        font-size: 14px;
    }



    /* 分页 start */

    .pagestyle {
        margin: 20px 0;
        float: right;
        padding-right: 15px;
    }


    /* 分页 end */

    .leftside {
        overflow-y: auto;
        border-right: 1px solid #e9eaec;

    }

    .leftside-search {
        padding: 10px;
    }

    .leftside-list {
        overflow-y: auto;
    }

    .leftside-list ul li {
        padding: 10px;
        cursor: pointer;
    }

    .leftside-list ul li:hover {
        background: rgba(64, 116, 225, 0.3);
        color: #4074e1;
        border-right: 4px solid #4074e1;
    }

    .leftside-list ul li:hover a {
        color: #4074e1;
    }

    .leftside-list .active,
    .leftside-list ul li.active:hover {
        background-color: #4074e1;
        color: #fff;
    }

    .leftside-list .active a,
    .leftside-list ul li.active:hover a {
        color: #fff;
    }

    .leftside-listspan {
        max-width: 75%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: inline-block;
        vertical-align: bottom;
        color: #000;
    }

    .leftside-edit {
        font-size: 18px;
    }

    .poptip-ul {
        color: #000;
    }

    .leftside-list ul li .poptip-ul li:hover {
        background-color: #4074e1;
        color: #fff;
    }

    .rightside-title {
        padding: 20px;
    }

    .rightside-title h3 {
        display: inline-block;
        font-size: 18px;
        font-weight: normal;
    }

    .title-total {
        font-size: 14px;
        color: #999;
    }

    .fr {
        float: right;
    }

    .rightside-content {
        padding: 5px;
    }

    .line {
        margin-top: 20px;
        margin-bottom: 20px;
        width: 100%;
        height: 1px;
        border-bottom: 1px dotted #dddee1;
        clear: both;
    }

    .center {
        text-align: center
    }

    .mr10 {
        margin-right: 10px;
    }

    .highlight_table .ivu-table .ivu-table-body tr.ivu-table-row-highlight td {
        height: 48px !important;
    }
</style>
<style>
    .highlight_table48 .ivu-table .ivu-table-body tr.ivu-table-row-highlight td {
        height: 48px !important;
    }
</style>


<template>
    <div class="member-manage ">
        <product-title></product-title>
        <div class="wraper">
            <Row>
                <Col span="4">
                <div class="leftside">
                    <div class="leftside-list" :style="leftHeight">
                        <ul>
                            <li v-for="(item,index) in ranklist" :key="item.id" :class="active == index ?'active':''" @click="leftActive(index)">
                                <Icon type="document-text"></Icon>
                                <a class="leftside-listspan" href="javascript:;" :title="item.name">{{item.name}}</a>
                            </li>
                        </ul>
                    </div>
                </div>
                </Col>
                <Col span="20">
                <div class="rightside">
                    <div class="rightside-title">
                        <h3>{{rightTitle}}的员工福利</h3>
                    </div>
                    <div style="padding-left:20px;">
                        <Button type="primary" style="height:32px;">新增</Button>
                        <Button type="success"  style="height:32px;">修改</Button>
                        <Button type="error" style="height:32px;">删除</Button>
                    </div>
                    <div class="rightside-content mr10 highlight_table table-theme highlight_table48">
                        <Table border ref="selection" :columns="columns4" :data="data1" highlight-row></Table>
                    </div>
                </div>
                <Spin size="large" fix v-if="spinShow"></Spin>
                </Col>
            </Row>
        </div>
    </div>
</template>

<script>
    import productTitle from '../../components/productTitle'
    import {
        creatBasicLaw,
        getCheck,
        getDetail
    } from '../../api/basiclaw'
    import {
        getRankList
    } from '../../api/rank'
   import {
        get_rank,
        add_weichi,
        get_indicators
    } from '../../api/rule'
    import util from '../../libs/util.js';
    export default {
        data() {
            return {
                current: {},
                disabled: true,
                phone: '团队标准保费',
                spinShow: false,
                cou: -1,
                active: 0,
                showAddModal: false,
                showeditModal: false,
                closeable: false,
                loading: true,
                leftHeight: {
                    height: '0px'
                },
                rightHeight: {
                    height: '0px'
                },
                dataLeft: [

                ],
                check: {
                    date: '',
                    next_rank_id: '',
                    check: [],
                    type: 1
                },
                checkmodal: {

                    id: '',
                    name: '',
                    symbol: '',
                    param: '',
                    unit: ''

                },
                rightTitle: '',
                roleList: [],
                planb: false,
                columns4: [
                    {
                        type:'index',
                        title:'序号',
                        width:80,
                        align:'center'
                    },
                    {
                        key:'name',
                        title:'员工福利组成',
                        align:'center'
                    }
                ],
                data1: [

                ],
                data2: [

                ],
                ruleValidate: {
                    id: [{
                        required: true,
                        message: '考核项目不能为空',
                        trigger: 'change'
                    }],
                    symbol: [{
                        required: true,
                        message: '参数符号不能为空',
                        trigger: 'change'
                    }, ],
                    param: [{
                        required: true,
                        message: '参数不能为空',
                        trigger: 'blur'
                    }],
                },
                checkruleValidate: {
                    date: [{
                        required: true,
                        message: '考核周期不能为空',
                        trigger: 'change'
                    }],
                    next_rank_id: [{
                        required: true,
                        message: '降级后职级不能为空',
                        trigger: 'change'
                    }]
                },
                ranklist: [],
                checkdate: [],
                checklist: [],
                symbollist: []
            }
        },
        components: {
            productTitle
        },
        computed: {
        },
        created() {
            let winHeight = screen.availHeight;
            this.leftHeight.height = (winHeight - 280 - 32) + 'px';
            this.rightHeight.height = (winHeight - 280) + 'px';
            this.spinShow = true
            this.getData();
        },
        methods: {
            getData(){
                new Promise((resolve, reject) => {
                    get_rank()
                        .then(response => {
                            console.log(response.data, '..response')
                            if (response.data.err == 0) {
                                this.ranklist = response.data.data;
                                if(this.ranklist.length>0){
                                    this.checkmodal.tempalteId = this.ranklist[0].id;
                                    this.rightTitle = this.ranklist[0].name;
                                    this.getDetail();
                                }
                                this.spinShow = false;
                            } else {
                                this.$Message.error(response.data.info);
                            }
                            resolve();
                        })
                        .catch(error => {
                            reject(error);
                        });
                });

            },
            getDetail() {
                new Promise((resolve, reject) => {
                    let url=BASE_URL1+"/kb/v1/rule/salary/config/rank/"+this.checkmodal.tempalteId;
                    util.ajax.get(url,{}).then(res=>{
                        this.data1 = res.data.data;
                        this.$Message.success('操作成功');
                        this.spinShow =false;
                    }).catch(data=>{

                    })
                });
            },
            //添加考核项
            leftActive(index) {
                this.spinShow = true
                this.active = index
                this.rightTitle = this.ranklist[index].name
                this.checkmodal.tempalteId = this.ranklist[index].id
                this.data1 = []
                this.data2 = []
                this.getDetail()
            },
        }
    }
</script>